<!--  -->
<template>
  <HeadModule />
  <MapboxContainer :visible="true" class="map" @onload="mapLoadFinish" />
  <ControlManager v-if="state.render" />
  <LoadingCover v-if="state.showLoading" />
</template>

<script setup>
import { reactive, onMounted, getCurrentInstance } from 'vue'
import MapboxContainer from '@/components/mapbox/Index.vue'
import ControlManager from './control/ControlManager.vue'
import HeadModule from './head/HeadModule.vue'
import LoadingCover from '../components/LoadingCover.vue'

import { mainStore } from '../store/index'
const store = mainStore()

const { proxy } = getCurrentInstance()

const state = reactive({
  render: false,
  showLoading: true
})

onMounted(() => {
  console.log('store', store.helloWorld)
  // 调试全局常量
  console.log('NODE_ENV', process.env.NODE_ENV)
  console.log('VUE_APP_PROGECTPATH', import.meta.env)
  setTimeout(() => {
    state.showLoading = false
  }, 2000)
})

// 地图创建后才能继续地图的其他操作
function mapLoadFinish(map) {
  proxy.$root.$map = map
  console.log('home中的map', proxy.$root.$map)
  state.render = true
}
</script>

<style scoped>
.map {
  width: 100vw !important;
  height: 100vh !important;
}
</style>
